import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
import router from "./router";
import store from "./store";
import './style/theme/index.scss';
import './style/main.scss';
import drawer from './components/drawer';
import dialog from './components/dialog';

Vue.use(ElementUI);

Vue.config.productionTip = false

// 抽屉窗口扩展
Vue.prototype.$drawer = drawer;
// dialog对话框
Vue.prototype.$dialog = dialog;

// 表单提交
Vue.prototype.$submit = (formDom, callback) => {
    formDom.validate((valid) => {
        if (valid) {
            callback();
        } else {
            let errors = formDom.fields;
            for (let error of errors) {
                if (error.validateState == 'error') {
                    ElementUI.Message.warning({
                        message: error.validateMessage
                        , duration: 2000
                    });
                    break;
                }
            }
        }
    });
};

Vue.prototype.$confirm = (content, onOk) => {
    ElementUI.MessageBox.confirm(content, {
        title: "提示",
        type: "warning",
        callback: (act) => {
            if (act == 'confirm') {
                onOk();
            }
        }
    });
}

// 权限判断 v-auth:key
Vue.directive('auth', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el, binding) {
        // 判断页面权限
        if (store.state.admin.id > 1) {
            let auth = store.state.auth;
            !auth[binding.arg] && el.parentNode.removeChild(el);
        }
    }
});
// 图片预览指令
Vue.directive('preview', {
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
        el.addEventListener('click', () => {
            Vue.prototype.$preview(el.getAttribute('src'))
        })
    }
});

Vue.prototype.$preview = (src) => {
    Vue.prototype.$msgbox({
        customClass: 'img-preview-box',
        dangerouslyUseHTMLString: true,
        message: `<img src='${src}' alt=""/>`,
        showConfirmButton: false,
        callback: () => {
        }
    });
}

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')
